<template>
  <div class="user-panel">
    <div class="user-info">
      <div class="user-avatar">
        <div @click="showPic(user.avatar)">
          <el-avatar :src="user.avatar" :size="100"></el-avatar>
        </div>
        <el-button type="text" icon="el-icon-edit-outline" @click="modify"></el-button>
      </div>
      <div class="user-details">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="user-item">
              <span class="user-label">姓名：</span>
              <span class="user-value">{{ user.name }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="user-item">
              <span class="user-label">账号：</span>
              <span class="user-value">{{ user.userName }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="user-item">
              <span class="user-label">邮箱：</span>
              <span class="user-value">{{ user.email }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="user-item">
              <span class="user-label">身份证号：</span>
              <span class="user-value">{{ user.idCard }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="user-item">
              <span class="user-label">用户类型：</span>
              <span class="user-value">
                <el-tag v-if="user.type==0" type="success">系统管理员</el-tag>
                <el-tag v-if="user.type==1" type="success">辅导员</el-tag>
                <el-tag v-if="user.type==2" type="success">医护人员</el-tag>
                <el-tag v-if="user.type==3" type="success">学生</el-tag>
              </span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--点击图片-->
    <el-image-viewer v-if="imgShow" :on-close="closeImgViewer" :url-list="imgList"/>

  </div>
</template>

<script>
export default {
  name: 'UserCard',
  components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  data() {
    return {
      imgList: [],
      imgShow: false
    }
  },
  props: {
    user: {
      type: Object,
      required: true,
      default: () => ({
        name: '',
        userName: '',
        avatar: '',
        type: '',
        email: '',
        id: '',
      }),
    },
  },
  methods: {
    modify() {
      this.$emit('modify')
    },
    showPic(pic) {
      console.log(111)
      this.imgShow = true;
      this.imgList.push(pic)
      const m = (e) => {
        e.preventDefault()
      };
      document.body.style.overflow = 'hidden';
      document.addEventListener("touchmove", m, false); // 禁止页面滑动
    },
    closeImgViewer() {
      this.imgShow = false;
      const m = (e) => {
        e.preventDefault()
      };
      document.body.style.overflow = 'auto';
      document.removeEventListener("touchmove", m, true);
    },
  }
};
</script>

<style scoped>
.user-panel {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  margin-right: 30px;
  display: flex;
}

.user-details {
  flex: 1;
}

.user-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-label {
  display: inline-block;
  width: 100px;
  color: #999;
}

.user-value {
  display: inline-block;
  font-size: 16px;
}
</style>
